<template>
	<view>
		<button type="default" class="btn" :class="classData" @click="dianji">btn</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classData:''
			}
		},
		methods: {
			dianji(){
				this.classData = 'animation-fade1';
				setTimeout(()=>{
					this.classData = ''
				},1000)
				
			}
		}
	}
</script>

<style>
 
 .btn{
	 width: 150rpx;
	 height: 150rpx;
	 margin: 0 auto;
	 background-color: #007AFF;
	 text-align: center;
	 line-height: 150rpx;
	 

 }
 .animation-fade1{
	 animation-name: move;
	 animation-duration: .8s;
	 animation-timing-function: ease-in;
	 animation-delay: 0s;
	 /* animation-iteration-count: infinite; */
	 animation-fill-mode: forwards;
	 /* animation-direction: reverse; */

 }
/* @keyframes move{
 		from{
 			opacity: 1;
			transform: scale(.2);
 		}
 		to{
 			opacity: 0;
			transform: scale(1);
 		}
 } */
/* @keyframes move{
 		from{
 			 transform: translate(0);
			 		 
 			 
 		}
 		to{
 		 transform: translate(-150rpx,150rpx);
 		}
 } */
 
 @keyframes move{
 	from{
		transform: translate(1000rpx);
	}
 	to{
		transform: translate(0);
	}
 }

</style>
